<template lang="pug">
  el-form-item(v-if="!scope" ref="formItem" label-width="0px" :prop="config.propertyName"  :rules="rules")
    requiredLabel(:required="required" :label="config.label")
    .show-date-value
      template(v-if="config.dateType.indexOf('range')<0")
        van-field(v-model="rootForm.properties[config.propertyName]" @click="popupOpen(rootForm.properties[config.propertyName],'one')" :placeholder="readonly?'':config.placeholder1" readonly)
      .show-date-value-range(v-if="config.dateType.indexOf('range')>-1")
        van-field(v-model="rootForm.properties[config.propertyName][0]" @click="popupOpen(rootForm.properties[config.propertyName][0],'twoFirst')" :placeholder="readonly?'':config.placeholder1" readonly)
        span 至
        van-field(v-model="rootForm.properties[config.propertyName][1]" @click="popupOpen(rootForm.properties[config.propertyName][1],'twoEnd')"  :placeholder="readonly?'':config.placeholder2" readonly)
      //- svg-icon.date-icon(v-if="!readonly&&rootForm.properties[config.propertyName]" icon-class="delete" @click.stop="deleteValue")
      i.date-icon(v-if="deleteIconShow" class="el-icon-error" @click.stop="deleteValue")

    van-popup(v-model="popupShow" position="bottom" :lazy-render="false")
      date-picker(v-if="config.dateType==='date'||!config.dateType||config.dateType==='daterange' " ref='date' :editor="editor" :config="config"  v-model="value" :readonly="readonly" @popupClose="popupClose")
      datetime-picker(v-if="config.dateType==='datetime'||config.dateType==='datetimerange' " ref='date' :editor="editor" :config="config"  v-model="value" :readonly="readonly" @popupClose="popupClose")
      time-picker(v-if="config.dateType==='time'" ref='date' :editor="editor" :config="config"  v-model="value" :readonly="readonly" @popupClose="popupClose")
      yearmonth-picker(v-if="config.dateType==='yearmonth'" ref='date' :editor="editor" :config="config"  v-model="value" :readonly="readonly" @popupClose="popupClose")
  //- el-form-item(v-else ref="formItem" label-width="0px" :prop="config.propertyName"  :rules="rules")
  div(v-else)
    requiredLabel(:required="required" :label="config.label")
    .show-date-value
      template(v-if="config.dateType.indexOf('range')<0")
        van-field(v-model="scope[config.propertyName]" @click="popupOpen(scope[config.propertyName],'one')" :placeholder="readonly?'':config.placeholder1" readonly)
      .show-date-value-range(v-if="config.dateType.indexOf('range')>-1")
        van-field(v-model="scope[config.propertyName][0]" @click="popupOpen(scope[config.propertyName][0],'twoFirst')" :placeholder="readonly?'':config.placeholder1" readonly)
        span 至
        van-field(v-model="scope[config.propertyName][1]" @click="popupOpen(scope[config.propertyName][1],'twoEnd')"  :placeholder="readonly?'':config.placeholder2" readonly)
      //- svg-icon.date-icon(v-if="!readonly&&scope[config.propertyName]" icon-class="delete" @click.stop="deleteValue")
      i.date-icon(v-if="deleteIconShow" class="el-icon-error" @click.stop="deleteValue")

    .scope-error-message {{scopeErrorMessage}}
    van-popup(v-model="popupShow" position="bottom" :lazy-render="false")
      date-picker(v-if="config.dateType==='date'||!config.dateType||config.dateType==='daterange' " ref='date' :editor="editor" :config="config"  v-model="value" :readonly="readonly" @popupClose="popupClose")
      datetime-picker(v-if="config.dateType==='datetime'||config.dateType==='datetimerange' " ref='date' :editor="editor" :config="config"  v-model="value" :readonly="readonly" @popupClose="popupClose")
      time-picker(v-if="config.dateType==='time'" ref='date' :editor="editor" :config="config"  v-model="value" :readonly="readonly" @popupClose="popupClose")
      yearmonth-picker(v-if="config.dateType==='yearmonth'" ref='date' :editor="editor" :config="config"  v-model="value" :readonly="readonly" @popupClose="popupClose")
</template>
<script>
import inputCommon from '../../../../mixin/inputCommon'
import requiredLabel from '../../../../components/requiredLabel'
import datePicker from './datePicker'
import datetimePicker from './datetimePicker'
import timePicker from './timePicker'
import yearmonthPicker from './yearmonthPicker'

import { addZero } from '../../../../../../../../common/utils/validate'

export default {
  name: 'dateRender',
  components: { datePicker, timePicker, datetimePicker, requiredLabel, yearmonthPicker },
  mixins: [inputCommon],
  props: ['config', 'editor', 'scope','readonlyMain'],
  inject: ['rootForm'],
  data() {
    return {
      default: this.config.dateType.indexOf('range') > -1 ? [] : undefined,
      popupShow: false,
      value: undefined,
      flag: undefined, // one:单个时间；twoFirst:范围的开始时间；twoSecond：范围的结束时间
      scopeErrorMessage: ''
    }
  },
  computed: {
    deleteIconShow() {
      let value = this.getValues()
      if (!this.readonly && this.config.dateType.indexOf('range') > -1 && value && value.length) {
        return true
      } else if (!this.readonly && this.config.dateType.indexOf('range') === -1 && value) {
        return true
      } else {
        return false
      }
    }
  },
  methods: {
    setValues(value) {
      if (this.scope) {
        this.scope[this.config.propertyName] = value
        this.validate()
      } else {
        this.rootForm.properties[this.config.propertyName] = value
      }
    },
    getValues() {
      if (this.scope) {
        return this.scope[this.config.propertyName]
      } else {
        return this.rootForm.properties[this.config.propertyName]
      }
    },
    deleteValue() {
      // this.rootForm.properties[this.config.propertyName] = this.default
      this.setValues(this.default)
      this.value = undefined
      this.$refs.formItem && this.$refs.formItem.$emit('el.form.change', this.default)
    },
    popupOpen(value, flag) {
      if (!this.readonly) {
        this.value = value
        this.flag = flag
        this.popupShow = true
        let pick = this.$refs.date && this.$refs.date.$refs.pick
        // 回显值
        if (value && value.indexOf('-') > -1) {
          let date = new Date(value)
          pick.$children[0].setValues([date.getFullYear() + '年', addZero(date.getMonth() + 1) + '月', addZero(date.getDate()) + '日', addZero(date.getHours()), addZero(date.getMinutes())])
        } else if (value && value.indexOf('-') === -1) {
          let date = value.split(':')
          pick.$children[0].setValues([date[0], date[1]])
        } else if (!value && this.config.dateType === 'time') {
          let date = new Date()
          pick.$children[0].setValues([addZero(date.getHours()), addZero(date.getMinutes())])
        } else if (!value && (this.config.dateType.indexOf('date') > -1 || this.config.dateType === 'yearmonth')) {
          let date = new Date()
          pick.$children[0].setValues([date.getFullYear() + '年', addZero(date.getMonth() + 1) + '月', addZero(date.getDate()) + '日', addZero(date.getHours()), addZero(date.getMinutes())])
        }
      }
    },
    popupClose(value) {
      this.popupShow = false
      if (value) {
        if (this.flag === 'one') {
          this.setValues(value)
          // this.$set(this.rootForm.properties, this.config.propertyName, value)
        } else if (this.flag === 'twoFirst') {
          // let lastTime = this.rootForm.properties[this.config.propertyName][1]
          let lastTime = this.getValues()[1]
          if (!lastTime || value > lastTime) {
            lastTime = value
          }
          this.setValues([value, lastTime])
          // this.$set(this.rootForm.properties, this.config.propertyName, [value, lastTime])
        } else if (this.flag === 'twoEnd') {
          // let firstTime = this.rootForm.properties[this.config.propertyName][0]
          let firstTime = this.getValues()[0]
          if (!firstTime) {
            firstTime = value
          } else if (firstTime > value) {
            value = firstTime
          }
          this.setValues([firstTime, value])
          // this.$set(this.rootForm.properties, this.config.propertyName, [firstTime, value])
        }
        this.$refs.formItem && this.$refs.formItem.$emit('el.form.change', this.getValues())
      }
    },
    // 针对scope的验证
    validate() {
      if (this.scope) {
        let value = this.scope[this.config.propertyName]
        if (this.required && (!value || !value.length)) {
          this.scopeErrorMessage = '必填项'
          return false
        }
        this.scopeErrorMessage = ''
        return true
      }
    }
  },
  created() {
    if (this.scope && this.scope[this.config.propertyName] === undefined) {
      this.scope[this.config.propertyName] = this.default
    }
  }
}
</script>
